<template>
  <div class="box" :style="registerBgc">
    <!-- <transition-group appear> -->
    <form action="javascript:;" v-show="!isShow" key="1">
      <h1 @click="btn">Register</h1>
      <div class="gotologin">
        <router-link :to="{ name: 'login' }">已有账户? 去登录</router-link>
      </div>
      <input
        type="tel"
        placeholder="手机号"
        maxlength="11"
        v-model.number="telephone"
        @blur="phoneblur(telephone)"
        name="phone"
      />
      <input
        type="password"
        placeholder="请输入6位以上密码"
        maxlength="25"
        v-model="password"
        @blur="passblur"
      />
      <input
        type="password"
        placeholder="确认密码"
        maxlength="25"
        v-model="passwordAgain"
        @blur="passwordblur"
      />
      <input
        type="text"
        placeholder="请输入手机验证码"
        class="textMessage"
        v-model="yzm"
      />
      <button
        type="text"
        class="cendMessage"
        @click="pushPhoneyzm"
        v-show="timerShow"
      >
        发送验证码
      </button>
      <button class="cendMessage countStyle" disabled v-show="!timerShow">
        剩余 {{ count }} s
      </button>
      <input
        type="checkbox"
        class="checkBox"
        :checked="check"
        @change="check = !check"
      />
      <span class="message">我已阅读并同意《用户协议》</span>
      <button @click="phoneSubmit">Register</button>
      <div class="other" @click="isShow = !isShow">选择其他方式注册</div>
    </form>
    <form action="javascript:;" v-show="isShow" key="2" class="emailRegister">
      <h1>Register</h1>
      <div class="gotologin">
        <router-link :to="{ name: 'login' }">已有账户? 去登录</router-link>
      </div>
      <input
        type="email"
        placeholder="邮箱"
        v-model="email"
        @blur="emailblur(email)"
        name="email"
      />
      <input
        type="password"
        placeholder="请输入6位以上密码"
        maxlength="25"
        v-model="password"
        @blur="passblur"
      />
      <input
        type="password"
        placeholder="确认密码"
        maxlength="25"
        v-model="passwordAgain"
        @blur="passwordblur"
      />
      <input
        type="text"
        placeholder="请输入邮箱验证码"
        class="textMessage"
        v-model="yzm"
      />
      <button
        type="text"
        class="cendMessage"
        @click="pushEmailyzm"
        v-show="timerShow"
      >
        发送验证码
      </button>
      <button class="cendMessage countStyle" disabled v-show="!timerShow">
        剩余 {{ count }} s
      </button>
      <input
        type="checkbox"
        class="checkBox"
        :checked="check"
        @change="check = !check"
      />
      <span class="message">我已阅读并同意《用户协议》</span>
      <button @click="emailSubmit">Register</button>
      <div class="other" @click="isShow = !isShow">选择其他方式注册</div>
    </form>
    <div class="more-bg" key="3" v-show="visible">
      <div class="more-box" v-show="visible">
        <!-- 邮箱注册完善信息 -->
        <div v-show="emailVisible">
          <h2 style="text-align: center">完善个人信息</h2>
          <div class="input-item">
            <label>姓名</label>
            <input
              type="text"
              placeholder="请输入真实姓名"
              v-model="moreInfo.username"
            />
          </div>
          <div class="input-item">
            <label>性别</label>
            <input
              type="radio"
              name="userInfo.sex"
              value="male"
              v-model="moreInfo.sex"
              class="sex"
            />男
            <input
              type="radio"
              name="userInfo.sex"
              value="female"
              v-model="moreInfo.sex"
              class="sex"
            />女
          </div>
          <div class="input-item">
            <label>学期</label>
            <input
              type="text"
              placeholder="请输入参加的期数（第x期）"
              v-model="moreInfo.issue"
            />
          </div>
          <div class="input-item">
            <label>手机</label>
            <input
              type="tel"
              placeholder="绑定手机号"
              maxlength="11"
              v-model.number="moreInfo.telephone"
              @blur="phoneblur(moreInfo.telephone)"
              name="phone"
            />
          </div>
          <!-- 发起手机验证码 -->
          <!-- <div class="input-item">
            <input
              type="text"
              placeholder="请输入手机验证码"
              class="textMessage moreInfo-testyzm"
              v-model="moreInfo.phoneyzm"
            />
            <button
              type="text"
              class="cendMessage"
              @click="pushPhoneyzm"
              v-show="timerShow"
            >
              发送验证码
            </button>
            <button class="cendMessage countStyle" disabled v-show="!timerShow">
              剩余 {{ count2 }} s
            </button>
          </div> -->
          <button @click="saveEmailSubmit()" class="savebnt">Save</button>
        </div>
        <!-- 手机号注册完善信息 -->
        <div v-show="telephonelVisible">
          <h2 style="text-align: center">完善个人信息</h2>
          <div class="input-item">
            <label>姓名</label>
            <input
              type="text"
              placeholder="请输入真实姓名"
              v-model="moreInfo.username"
            />
          </div>
          <div class="input-item">
            <label>性别</label>
            <input
              type="radio"
              name="userInfo.sex"
              v-model="moreInfo.sex"
              value="male"
              class="sex"
            />男
            <input
              type="radio"
              name="userInfo.sex"
              v-model="moreInfo.sex"
              value="female"
              class="sex"
            />女
          </div>
          <div class="input-item">
            <label>学期</label>
            <input
              type="text"
              placeholder="请输入参加的期数"
              v-model="moreInfo.issue"
            />
          </div>
          <div class="input-item">
            <label>邮箱</label>
            <input
              type="email"
              placeholder="绑定邮箱"
              v-model="moreInfo.email"
              @blur="emailblur(moreInfo.email)"
              name="moreInfo.email"
            />
          </div>
          <div class="input-item">
            <input
              type="text"
              placeholder="请输入邮箱验证码"
              class="textMessage moreInfo-testyzm"
              v-model="moreInfo.emailyzm"
            />
            <button
              type="text"
              class="cendMessage"
              @click="pushEmailYzm()"
              v-show="timerShow"
            >
              发送验证码
            </button>
            <button class="cendMessage countStyle" disabled v-show="!timerShow">
              剩余 {{ count2 }} s
            </button>
          </div>
          <button @click="savePhoneSubmit()" class="savebnt">Save</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import "animate.css";
import axios from "axios";
import {
  emailSubmitAPI,
  emailRegisterAPI,
  phoneRegisterAPI,
  emailYzmAPI,
  phoneYzmAPI,
} from "@/api/utils";
export default {
  name: "register",
  watch: {
    visible: {
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.$message.warning("以下内容不可更改,请谨慎填写！");
        }
      },
    },
  },
  data() {
    return {
      telephone: "", //电话号码
      password: "", // 密码
      passwordAgain: "", // 确认密码
      yzm: "", // 验证码
      email: "", // 邮箱
      currentColor: "", // 下拉框当前字体颜色
      isShow: true, // 选择显示手机注册还是邮箱注册
      check: false, // 复选框是否选择
      timerShow: true, // 验证码是否显示倒计时
      count: 60, // 倒计时秒数
      count2: 60, //注册倒计时秒数
      istimer: null,
      // 背景图片
      registerBgc: {
        backgroundImage: "url(" + require("@/assets/images/rbgc.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      visible: false,
      emailVisible: false, // 邮箱注册弹框显示
      telephonelVisible: false,
      //完善信息表单
      moreInfo: {
        username: "",
        sex: "",
        issue: "",
        email: "",
        emailyzm: "", //邮箱验证码
        telephone: "",
        phoneyzm: "",
      },
    };
  },
  methods: {
    btn() {
      this.$router.push({
        name: "teacherLogin",
      });
      // console.log(1);
    },
    //弹框判断方法
    isJudge(val, attribute, message) {
      if (val) {
        this.$message.success("正确！");
        this[attribute] = true;
      } else {
        this.$message.error(message);
        this[attribute] = false;
      }
    },
    //电话输入表单校验
    phoneblur(telephone) {
      if (!telephone) return;
      var t = /^1\d{10}$/.test(telephone);
      this.isJudge(t, "phoneJudge", "电话格式错误！");
    },
    // 邮箱校验
    emailblur(email) {
      if (!email) return;
      var emailzz = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
        email
      );
      this.isJudge(emailzz, "phoneJudge", "邮箱格式错误！");
    },
    // 密码表单校验
    passblur() {
      //判断是否为空
      if (!this.password) return;
      if (this.passwordAgain && this.password !== this.passwordAgain)
        return this.isJudge(0, "passJudge", "两次密码输入不一样,请重新输入！");
      //将字符串转化为数组，判断长度
      const ArryPass = this.password.split("");
      //判断密码长度
      ArryPass.length <= 6
        ? this.isJudge(0, "passJudge", "密码长度要六位以上！")
        : this.isJudge(1, "passJudge");
    },
    // 确认密码表单校验
    passwordblur() {
      if (!this.passwordAgain) return;
      this.password === this.passwordAgain
        ? this.isJudge(1, "passwordJudge")
        : this.isJudge(0, "passwordJudge", "两次密码输入不一样,请重新输入！");
    },
    //邮箱提交
    async emailSubmit() {
      this.dialogVisible = true;
      if (
        this.phoneJudge &&
        this.passJudge &&
        this.passwordJudge &&
        this.check
      ) {
        // #region
        // {
        return emailSubmitAPI(this.email).then((res) => {
          if (!res.data.flag) {
            return emailRegisterAPI(this.email, this.yzm, this.password).then(
              (res) => {
                if (res.data.flag) {
                  // this.$message.success('注册成功！')
                  this.visible = true;
                  this.emailVisible = true;
                  //  this.$router.push({
                  //   path: "/login",
                  // });
                } else {
                  this.$message.error("验证码错误！");
                }
              }
            );
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      } else {
        this.$message.error("信息填写不完整！请填写完整！");
      }
    },
    //手机号提交
    async phoneSubmit() {
      if (
        this.phoneJudge &&
        this.passJudge &&
        this.passwordJudge &&
        this.check
      ) {
        return phoneRegisterAPI(this.telephone, this.yzm, this.password).then(
          (res) => {
            if (!res.data.errorMsg) {
              axios({
                method: "POST",
                data: qs.stringify(obj),
              }).then((res) => {
                if (res.data.flag) {
                  this.$message.success("注册成功！");
                  this.$router.push({
                    path: "/teacherLogin",
                  });
                } else {
                  this.$message.error("手机号已存在！");
                }
              });
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }
        );
      } else {
        this.$message.error("出错啦！重新输入");
      }
    },
    //获取邮箱验证码
    async pushEmailyzm() {
      if (!this.email) {
        return this.$message.error("请输入邮箱！");
      } else {
        return emailYzmAPI(this.email).then((res) => {
          if (res.data.flag) {
            this.prohibitButton();
          } else {
            this.$message.error(res.data.error);
          }
        });
      }
    },
    //获取手机验证码
    async pushPhoneyzm() {
      if (!this.telephone) return this.$message.error("请输入手机号！");
      else {
        if (this.istimer === null) {
          return phoneYzmAPI(this.telephone).then((res) => {
            if (res) {
              this.prohibitButton();
            } else {
              this.$message.error(res.data.error);
            }
          });
        }
      }
    },
    //禁止按钮点击
    prohibitButton() {
      if (!this.istimer) {
        this.count = 60;
        this.timerShow = false;
        this.istimer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.timerShow = true;
            clearInterval(this.timer);
            this.istimer = null;
          }
        }, 1000);
      }
    },
    // 手机号验证码
    //获取邮箱验证码
    pushEmailYzm() {
      if (!this.moreInfo.email) {
        return alert("请输入邮箱！");
      } else {
        // if (this.istimer === null) {
        this.$http({
          method: "post",
          url: `user/sendCodeByEmail?email=${this.moreInfo.email}`,
        }).then(({ data }) => {
          if (data.flag) {
            this.prohibitButton();
          }
        });
      }
    },
    // 手机号完善信息保存
    savePhoneSubmit() {
      let obj = {};
      let yz = {};
      yz.email = this.moreInfo.email;
      yz.code = this.moreInfo.emailyzm;
      this.$http({
        method: "post",
        headers: {
          "content-Type": "application/x-www-form-urlencoded",
        },
        url: "user/findPasswordByEmail",
        data: qs.stringify(yz),
      }).then(({ data }) => {
        if (data.flag) {
          obj.email = this.moreInfo.email;
          obj.id = this.data.data.id;
        } else {
          this.$message.error("验证码错误！");
        }
      });
      obj.username = this.moreInfo.username;
      obj.sex = this.moreInfo.sex;
      obj.issue = this.moreInfo.issue;
      obj.telephone = this.telephone;
      obj.password = this.password;
      this.userInfoEdit(obj);
    },
    // 邮箱完善信息保存
    saveEmailSubmit() {
      if (
        this.moreInfo &&
        this.moreInfo.sex &&
        this.moreInfo.issue &&
        this.moreInfo.telephone
      ) {
        this.$http({
          method: "post",
          headers: {
            "content-Type": "application/x-www-form-urlencodedt",
          },
          url: `user/selectUserByEmail?email=${this.email}`,
        }).then(({ data }) => {
          if (data.flag) {
            let obj = {};
            obj = data.data;
            obj.username = this.moreInfo.username;
            obj.sex = this.moreInfo.sex;
            obj.issue = this.moreInfo.issue;
            obj.telephone = this.moreInfo.telephone;
            this.userInfoEdit(obj);
            this.$router.push({
              path: "/login",
            });
          }
        });
      } else {
        this.$message.error("请将信息填写完整！");
      }

      //let yz = {};
      // yz.telephone = this.moreInfo.telephone;
      // yz.code = this.moreInfo.phoneyzm;
      // axios({
      //   method: "post",
      //   headers: {
      //     "content-Type": "application/x-www-form-urlencodedt",
      //   },
      //   url: "http://124.71.219.15:8083//management_system/user/selectByTelephone",
      //   data: qs.stringify(yz),
      // }).then((response) => {
      //   log(response.data.data);
      //   if (response.data.flag) {
      //     obj.telephone = this.moreInfo.telephone;
      //     obj.id = this.data.data.id;
      //   } else {
      //     this.$message.error("验证码错误！");
      //   }
      // });
    },
  },
};
</script>

<style scoped>
.box {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(to right, #f0bbed, #b9bef1); */
}
form {
  overflow: hidden;
  position: absolute;
  width: 350px;
  height: 460px;
  padding: 0 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.gotologin {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 12px;
  color: red;
  cursor: pointer;
}

input {
  width: 100%;
  height: 30px;
  border-radius: 20px;
  margin-bottom: 20px;
  outline: none;
  text-indent: 5px;
  border: none;
  border: 1px solid #a8a5a5;
  cursor: pointer;
  transition: 3s linear;
}
.textMessage {
  width: 250px;
}
.cendMessage {
  width: 80px;
  height: 30px;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 12px;
  background-image: linear-gradient(to right, #f0bbed, #f582cf);
}
.countStyle {
  background-image: linear-gradient(to right, #b6a3eb, #ec84eccb);
  cursor: not-allowed;
}
form input {
  margin: 8px 0 !important;
}
.checkBox {
  width: 15px;
  vertical-align: middle;
}
.message {
  font-size: 12px;
  line-height: 35px;
  cursor: pointer;
  margin-left: 4px;
}
button {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  background-image: linear-gradient(to right, #f0bbed, #b9bef1);
  border: none;
  margin-bottom: 20px;
  cursor: pointer;
}
.other {
  font-size: 12px;
  color: skyblue;
  text-decoration: underline;
  cursor: pointer;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.8s ease;
}

.alertMessage {
  position: absolute;
  top: 0;
  left: 155px;
  width: 140px;
  height: 30px;
  background-color: #b9bef1;
  z-index: 1;
  text-align: center;
  line-height: 30px;
  color: green;
  font-size: 12px;
  transition: all 0.5s;
  overflow: hidden;
  /* border-top-left-radius: 10px; */
}

.error {
  color: "red" !important;
}

.more-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  /* transform: ; */
  background-color: rgba(0, 0, 0, 0.5);
}
.more-box {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 500px;
  /* height: 100%; */
  padding: 23px 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  z-index: 99;
}
.input-item {
  margin: 10px 0;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
}
.input-item label {
  display: inline-block;
  margin-right: 7px;
}
.input-item input {
  width: 60%;
  margin: 0;
  padding-left: 10px;
}
.input-item .sex {
  width: 10%;
  height: 15px;
  line-height: 20px;
  vertical-align: middle;
  margin: 10px 0;
}
.input-item .moreInfo-testyzm {
  margin-left: 39px;
}

.savebnt {
  margin-top: 20px;
  width: 80%;
  margin-left: 39px;
}
</style>